<template>
	<view style="position: relative;">
		<u--form labelPosition="left" :model="info" :rules="rules" ref="uForm">
			<view class="info">
				<u-form-item label="关闭原因" prop="name" :labelWidth="labelWidth" required labelPosition="top">
					<u--textarea v-model="info.reaseon" placeholder="请输入内容" count border="none"
						:maxlength="50"></u--textarea>
				</u-form-item>
			</view>


			<view class="info">
				<u-form-item label="图片说明" prop="imgs" :labelWidth="labelWidth" required labelPosition="top">
					<u-upload style="margin-top: 24rpx;" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="3"></u-upload>
				</u-form-item>
			</view>

			<view class="info">
				<u-form-item label="视频说明" prop="videos" :labelWidth="labelWidth" required labelPosition="top">
					<u-upload style="margin-top: 24rpx;" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="3"></u-upload>
				</u-form-item>
			</view>
		</u--form>

		<view class="bottom row-center" @click="goClose">
			<view class="btn row-center" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelWidth: 120,
				info: {
					'reaseon': '',
					'imgs': '',
					'videos': '',
				},
				rules: {
					'reaseon': {
						type: 'string',
						required: true,
						message: '请输入原因',
						trigger: ['blur', 'change']
					},
					'imgs': {
						type: 'string',
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					},
					'videos': {
						type: 'string',
						required: true,
						message: '请上传视频',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		}
	}
</script>
<style>
	page {
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.info {
		margin-top: 20rpx;
		padding: 24rpx;
		background-color: white;
	}

	.bottom {
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 120rpx;
		background: #FFF;

		.btn {
			height: 80rpx;
			width: calc(100% - 72rpx);
			margin-left: 36rpx;
			margin-right: 36rpx;
			border-radius: 40rpx;
			background: #3B60D3;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx;
			/* 150% */
		}
	}
</style>